<template>
  <div class="app-container">
    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="regEndTime">
        <TimeRangePicker
          :start.sync="list.filter.startTime"
          :end.sync="list.filter.endTime"
          value-format="yyyy-MM-dd"
          placeholder="开始时间/结束时间"
        />
      </el-form-item>
      <el-form-item prop="orderId">
        <el-input
          v-model="list.filter.orderId"
          placeholder="订单号"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="hotelName">
        <el-input
          v-model="list.filter.hotelName"
          placeholder="酒店名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="payNo">
        <el-input
          v-model="list.filter.payNo"
          placeholder="支付单号"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item v-if="userInfo && userInfo.userType != 1" prop="merchantId">
        <KiSelect
          v-model="list.filter.merchantId"
          :options.sync="localDict.merchantOpt"
          :search="queryListForNoPermission"
          :searchImmediately="false"
          :props="{
            label: 'name',
            value: 'id',
          }"
          placeholder="所属商户"
        />
      </el-form-item>
      <!-- <el-form-item prop="channelId">
        <KiSelect
          v-model="list.filter.channelId"
          :options.sync="localDict.channel"
          :search="queryForList"
          :searchImmediately="false"
          optionKey="id/channelName"
          :props="{
            label: 'channelName',
            key: 'channelId',
          }"
          placeholder="渠道"
        />
      </el-form-item> -->
      <el-form-item prop="reasonType">
        <KiSelect
          v-model="list.filter.reasonType"
          :options="localDict.settlement"
          placeholder="结算类型"
        />   
      </el-form-item>
      <el-form-item prop="tradePartner">
        <el-input
          v-model="list.filter.tradePartner"
          placeholder="结算对象"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-button
        @click="
          () => {
            $refs.listFilterRef.resetFields()
          }
        "
        >重置</el-button
      >
    </el-form>

    <div class="table-operation">
      <span>
        <!-- <AuthButton @click="exportList" name="导出" :loading="loading" /> -->
        <ExportExcel
          url="/sot-admin-api/hotel/self-order-audit/export"
          :param="list.filter"
        />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table
      stripe
      v-loading="list.loading"
      :data="list.data"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" type="index" />
      <el-table-column label="订单号" prop="orderId" />
      <el-table-column label="酒店名称" prop="hotelName" />
      <el-table-column label="所属商户" prop="merchantName" />
      <!-- <el-table-column label="渠道" prop="channelName" /> -->
      <el-table-column label="交易金额" prop="money">
        <template slot-scope="{ row }">{{
          row.money | $cent2yuan
        }}</template>
      </el-table-column>
      <el-table-column label="结算类型" prop="reasonTypeName" />
      <el-table-column label="结算对象" prop="tradePartner" />
      <el-table-column label="结算方式" prop="payMethodName" />
      <el-table-column label="支付单号" prop="payNo" />
      <el-table-column label="结算时间" prop="auditTime" />
    </el-table>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import TimeRangePicker from 'time-range-picker'
import { mapGetters } from "vuex";

export default {
  mixins: [pageMixin],
  computed: {
    ...mapGetters(["userInfo"]),
  },
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/hotel/self-order-audit',
    list: {
      filter: {
        startTime: TimeRangePicker.defaultDate.currentMonth[0],
        endTime: TimeRangePicker.defaultDate.currentMonth[1],
        reasonType : ""
      }
    },
  }),
  data () {
    return {
      // TimeRangePicker,
      loading: false,
      localDict: {
        merchantOpt: [],
        flowing: [
          { dataValue: 1, dataName: '收入' },
          { dataValue: 2, dataName: '支出' }
        ],
        settlement: [
          { dataValue: 6, dataName: '产品收入' },
          { dataValue: 7, dataName: '产品退款' },
          { dataValue: 1, dataName: '平台服务费' },
          { dataValue: 8, dataName: '平台服务费退款' },
          { dataValue: 4, dataName: '支付手续费' },
          { dataValue: 9, dataName: '支付手续费退款' }
        ],
        target: [

        ],
        channel: []
      }
    }
  },
  methods: {
    queryListForNoPermission(name) {
    // 所属商户
      this.$POST('sot-admin-api/merchant/merchant/queryListForNoPermission', { 'name': name }).then(_=>{
        this.localDict.merchantOpt = _.data
      })
    },
    // queryForList(channelName) {
    // // 【渠道】平台用户查看所有渠道 企业用户查看已授权的渠道 （userInfo => 0: 平台用户  1: 企业用户）
    //   let o =  this.userInfo && this.userInfo.userType == '1' ? { authHotel: 1 } : {}
    //   this.$POST('sot-admin-api/sys/company-channel/queryForList', { channelName, ...o }).then(_=>{
    //     this.localDict.channel = _.data
    //   })
    // },
    // exportList () {
    //   this.loading = true
    //   this.$download('/self-order-audit/export', this.list.filter,
    //    {
    //     method: 'POST'
    //   }).finally(e => {
    //     this.loading = false
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped></style>
